j22cal Posted August 10, 2009 Report Share Posted August 10, 2009 Hey all. I am not new to this site, but had to re-register. However, I was hoping someone could help me with a IE7 CSS issue that I am having? On www.commentsandcapers.com my menu on the right it not centering in the containing element. Could one of you take a look at it and see if you could point out what it is. Of course, it looks fine in IE8 and Firefox. http://www.commentsandcapers.com Here is the menu code: #rightLinks ul.topMenu { text-align: center; z-index: 20; } #rightLinks ul.topMenu li { list-style-type: none; position: relative; text-align: center; } #rightLinks ul.topMenu li > ul { display: none; font-size: 1.0em; position: absolute; right: 200px; top: 2px; z-index: 20; } #rightLinks ul.topMenu ul.topMenu { display: block; } #rightLinks ul.topMenu li:hover > ul { display: block; } #rightLinks ul.topMenu li a { background-image: url(../images/Cbutton.png); background-repeat: no-repeat; color: white; display: block; font-family: "Lucida Sans Unicode", Tahoma, Geneva, sans-serif; height: 20px; letter-spacing: 4px; margin: 0 auto 3px auto; text-align: center; text-decoration: none; width: 192px; } #rightLinks ul.topMenu ul { background: #F2F2F2; text-align: center; width: 145px; } #rightLinks ul.topMenu li li a { background-image: url(../images/CSubbutton.png); font-family: "Lucida Sans Unicode", Tahoma, Geneva, sans-serif; letter-spacing: 0px; text-align: center; width: 140px; padding:0; } #rightLinks ul.topMenu li:hover > a { background-image: url(../images/Cbutton2.png); background-repeat: no-repeat; } #rightLinks ul.topMenu li li:hover > a { background-image: url(../images/CSubbutton2.png); background-repeat: no-repeat; color: #fff; z-index: 20; } Quote Link to comment Share on other sites More sharing options...
Wickham Posted August 11, 2009 Report Share Posted August 11, 2009 (edited) I first noticed that the large header image had dropped down below the right column in E7. You have mixed % widths with px; #rightLinks is 200px wide and #header is 80% so in some resolutions they won't fit together; IE can't manage it while Firefox knows what you want. I changed width: 200px; to 19% and IE7 is OK but it may have affected other things. (20% doesn't work). It's OK at my 1024*768 resolution in IE7 but when I reduce the window size, it breaks again because the inner divs still have widths in px like 190px, so you will either have to make them all px or all % widths. #rightLinks { background: #F2F2F2; float: right; height: 100%; margin: 0px 0px 60px 0; padding: 5px; position: relative; width: 19%;/*200px;*/ z-index: 5; } #header { background: url(images/colorRose.png); background-repeat: no-repeat; height: 350px; margin-bottom: 10px; position: relative; width: 80%; z-index: -1; } I haven't looked at the centering problem with the right column, get the widths sorted first. Edited August 11, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
j22cal Posted August 11, 2009 Author Report Share Posted August 11, 2009 Ok, thanks for looking at it. Actually, I did not even think about that being part of the centering problem, but it seemed to fix it. However, now that the menu is not a fixed size (I made the a percentage of their containing element so that I could keep them centered, the drop down part of the menu is not consistent. Is there anyway to correct this? Here is what I have, but it is not working: #rightLinks ul.topMenu li > ul { display: none; font-size: 1.0em; position: absolute; right: 119%; top: 1%; I changed this part to percentage as well, thinking that it might correct the problem, but it didn't work. Thanks! Quote Link to comment Share on other sites More sharing options...
j22cal Posted August 11, 2009 Author Report Share Posted August 11, 2009 take that back, the centering still is not working in IE7, although it is better. Quote Link to comment Share on other sites More sharing options...
j22cal Posted August 11, 2009 Author Report Share Posted August 11, 2009 Well, i got it mostly working like I want it, except that the link images are a fixed size and they do not change size with the page. But I don't think that I can make them percentages and still keep the drop-down working consistently across pages sizes? Quote Link to comment Share on other sites More sharing options...
astone7035 Posted August 11, 2009 Report Share Posted August 11, 2009 I'm having a different problem with my CSS menu. It is a horizontal menu and I can't get it to go across the page it goes down the page. Any thoughts why this would do this? Quote Link to comment Share on other sites More sharing options...
j22cal Posted August 11, 2009 Author Report Share Posted August 11, 2009 Are you using float: left (or right), and display: inline? Quote Link to comment Share on other sites More sharing options...
astone7035 Posted August 12, 2009 Report Share Posted August 12, 2009 Yes it was set to float: left and display: inline. Quote Link to comment Share on other sites More sharing options...
astone7035 Posted August 12, 2009 Report Share Posted August 12, 2009 Posting all of the CSS Code below: .jqueryslidemenu{ font: bold 12px Verdana; background: #FFFFFF; width: 100%; } .jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; } /*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline-block; float: none; } /*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #999999; /*background of tabs (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #990000; text-decoration: none; } * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: block; } .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; } .jqueryslidemenu ul li a:hover{ background: #990000; /*tab link background during hover state*/ color: white; } /*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left:0; display: block; visibility: hidden; } /*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; } /*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; } /* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 200px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #FFFFFF; color: silver; } /* ######### CSS classes applied to down and right arrow images ######### */ .downarrowclass{ position: absolute; top: 12px; right: 7px; } .rightarrowclass{ position: absolute; top: 6px; right: 5px; } Any help in telling me why this will not center across the page would greatly help. Thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.